<template>
  <div class="class-create-root">
    <!-- @closed 窗口关闭时结束时的回调   -->
    <el-dialog v-model="dialogStatus" :title=className  width="1400"
               @closed="closeDialog"
               style="text-align: center;font-weight:bold;"
    >
      <el-table :data="tableData" style="width: 100%;">
        <el-table-column fixed prop="name" label="学员姓名" width="80" />
        <el-table-column prop="age" label="出生日期" width="100" />
        <el-table-column prop="sex" label="性别" width="60" >
          <template #default="scope">{{ SEX[scope.row.sex]!==undefined ? SEX[scope.row.sex] : '其他'}}</template>
        </el-table-column>
        <el-table-column prop="phone" label="电话" width="120" />
        <el-table-column prop="email" label="邮箱" width="200" />
        <el-table-column prop="school" label="毕业院校" width="150" />
        <el-table-column prop="school_type" label="院校类型" width="100" >
          <template #default="scope">{{ sysDictStore.SCHOOL_TYPE[scope.row.school_type]!==undefined ? sysDictStore.SCHOOL_TYPE[scope.row.school_type] : '其他'}}</template>
        </el-table-column>
        <el-table-column prop="major" label="专业" width="150" />
        <el-table-column prop="graduation_date" label="毕业日期" width="100" />
        <el-table-column prop="has_graduation_cert" label="获得毕业证" width="110" >
          <template #default="scope">{{ scope.row.has_graduation_cert === true ? '是' : '否'}}</template>
        </el-table-column>
        <el-table-column prop="contact_person_phone" label="紧急联系人电话" width="140" />
        <el-table-column prop="is_monitor" label="是否班长" width="120" >
          <template #default="scope">{{ scope.row.is_monitor === 1 ? '是' : '否'}}</template>
        </el-table-column>
      </el-table>
      <template #footer>
        <div class="dialog-footer">
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { reactive, ref, watch } from 'vue'
import {getStudentByClassIdAPI} from "@/network/student/student";
import EventBus from "@/plugins/event-bus";
import {ElMessage} from "element-plus";
import {SEX, SYS_DICT} from "@/dict/dict-sys";
import {useSysDictStore} from "@/store/store-sys-dict-pinia";
const sysDictStore = useSysDictStore();

sysDictStore.getSysDict([SYS_DICT.SCHOOL_TYPE]);
// const tableData =[
//     {
//       name: '城乡加入',
//       age: 18,
//       sex: '男',
//       phone: '12345678911',
//       email: 'zjingyang@sina.com',
//       school: '中国政法大学',
//       school_type: '全日制本科',
//       major: '计算机科学与技术',
//       graduation_date: '2023-06-06',
//       has_graduation_cert: '是',
//       contact_person_phone: '12345678911',
//       is_monitor:"是",
//     }
//   ]

const tableData = ref([])



const props = defineProps({
  queryDialogFormVisible: Boolean
})
const dialogStatus = ref(props.queryDialogFormVisible)
const emit = defineEmits(['closeQueryFormVisible'])
const closeDialog = ()=>{
  tableData.value = []
  emit('closeQueryFormVisible', false)
}

// 监听父组件传递的 `dialogFormVisible` 变化
watch(() => props.queryDialogFormVisible, (newValue) => {
  // 如果需要在变化时执行一些逻辑，可以在这里添加，这里只把关闭的值传进去，相当于状态值转一圈来控制对话框的打开和关闭
  dialogStatus.value = newValue;
});

const className = ref()
EventBus.on("query-student-list-by-class-event", (classDataValue)=>{
  className.value = classDataValue.className
  getStudentByClassIdAPI(classDataValue.classId).then(res=>{
    if (res.data.code !== 0) {
      ElMessage.error(res.data.message)
    }
    tableData.value = res.data.data
    ElMessage.success(res.data.message)
  })

})


</script>

<style scoped lang="less">

</style>